<template>
    <div class="app">
  <!-- 搜索栏 -->
  <!-- <div class="searchbox">
        <input type="text" placeholder="搜索商家、商品名称" v-model="searchText">
        <span @click="shopsearch">搜索</span>
    </div> -->
    <div class="block">
        <div class="title">
            <span>历史搜索</span>
            <van-icon name="delete" @click="deleteshop"/>
        </div>
        <div class="list">
            <span v-for="(item,index) in this.searchArr" :key="index" @click="shopenter(item)">{{item}}</span>
        </div>
    </div>
    <div class="block">
        <span class="search">搜索发现</span>
        <div class="list">
            <span v-for="(item,index) in this.searchArr" :key="index" @click="shopenter(item)">{{item}}</span>
        </div>
    </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import {shop_search} from '@/utils/api'
export default {
    data(){
        return {

        }
    },
    computed:{
        ...mapState(['searchArr']),
    },
    methods:{
        shopenter(item){
            shop_search({searchkey:item}).then((res)=>{
                this.$router.push('/search/result');
                this.$store.commit('render',res.data.list);
                this.searchText = "";
            })
        },
        deleteshop(){
            this.searchArr.splice(0,this.searchArr.length);
        }
    },
}
</script>

<style lang='scss' scoped>
.block{
    margin-bottom: 30px;
    padding: 0 20px;
}

.block .list span {
    display: inline-block;
    background-color: #fff;
    line-height: 20px;
    height: 20px;
    padding: 5px 15px;
    margin-top: 5px;
    margin-left: 10px;
    border-radius: 5px;
    box-shadow: 0 8px 12px #ebedf0;
}
.title {
    font-weight: bolder;
    padding: 10px 0 ;
    display: flex;
    justify-content: space-between;
}
.title span:nth-child(1) {
    font-size:20px ;
}
.search {
    font-weight: bolder;
    padding: 10px 0 ;
    display: flex;
    font-size:20px ;
}
</style>